<template>
	<view>
		<view class="top">
			<view class="type">
				<u-subsection :list="list" :current="tabCurrent" height="50" bg-color="#DA7B36" active-color="#DA7B36"
					inactive-color="#fff"></u-subsection>
			</view>
			<view class="search">
				<u-search class="search" @search="search" v-model="searchData" border-color="#efefef" shape="square" :show-action="false"
					:animation="false" bg-color="#fff" input-align="center">
				</u-search>
			</view>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" class="tab_scroll">
				<view :class="{tab_item:true,active:current == index}" v-for="(tab,index) in categoriesData"
					:key="tab._id" @click="location(index)">{{tab.cat_name}}</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="category_item" :scroll-into-view="scrollTop"
				scroll-with-animation="true">
				<view v-for="(item,index) in categoriesData" :key="item._id" :id='"text" + index'>
					<view class="tab_name">{{item.cat_name}}</view>
					<view class="cook_item">
						<view v-for="cook in item.children" :key="cook.cat_id">
							<image :src="cook.cat_icon"></image>
							<text>{{cook.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '分类'
					},
					{
						name: '食材'
					}
				],
				tabCurrent: 0,
				current: 0,
				searchData: '',
				categoriesData: [],
				scrollTop: '',
			}
		},
		methods: {
			async getCategories() {
				const result = await this.$api.home.getCategories();
				if (result.meta.status == 200) {
					this.categoriesData = result.message;
					console.log(result.message);
				}
			},
			location(index) {
				this.current = index;
				this.scrollTop = "text" + index;
				console.log(index);
			},
			search() {
				uni.navigateTo({
					url: `/pages/cookSearch/cookSearch?target=${this.searchData}`
				})
			}
		},
		created() {
			this.getCategories();
		}
	}
</script>

<style lang="scss">
	.top {
		height: 200rpx;
		padding: 0 40rpx;
		background: #DA7B36;
		overflow: hidden;

		.type {
			width: 400rpx;
			border: 4rpx solid #fff;
			border-radius: 20rpx;
			margin: 20rpx auto;
			overflow: hidden;
		}

		.search {
			margin: 20rpx 0;
		}
	}

	.content {
		display: flex;
		height: calc(100vh - 200rpx);

		.tab_scroll {
			width: 180rpx;
			height: calc(100vh - 200rpx);

			.tab_item {
				text-align: center;
				height: 140rpx;
				line-height: 140rpx;
			}
			.active {
				position: relative;
				width: 180rpx;
				height: 140rpx;
				color: #F09655;
				background: #F6F6F6;
				&::after {
					content: '';
					display: block;
					position: absolute;
					background: red;
					top: 35%;
					right: -50%;
					width: 100rpx;
					height: 40rpx;
				}
			}
		}

		.category_item {
			width: 570rpx;

			.tab_name {
				padding: 30rpx 0 0 30rpx;
				color: #999;
			}

			.cook_item {
				display: flex;
				flex-wrap: wrap;

				view {
					width: 100rpx;
					margin: 40rpx;
					text-align: center;

					image {
						width: 100%;
						height: 100rpx;
					}
				}
			}
		}
	}
</style>
